<template>
	<view class="pyg_index">
        <!--搜索框-->
        <!-- <search-Input></search-Input> -->
        <!--轮播图-->
        <view class="index_swiper">
            <swiper autoplay indicator-dots circular>
                <swiper-item 
                v-for="item in swiperList"
                :key="item.goods_id">
                    <navigator :url="item.navigator_url">
                        <image mode="widthFix" :src="item.image_src"></image>
                    </navigator>
                </swiper-item>
            </swiper>
        </view>
        <!--导航栏-->
        <!-- <view class="index_cate">
            <navigator 
            v-for="item in catesList"
            :key="item.name"
            :url="`/pages/category/main`"
            open-type="switchTab"
            >
                <image mode="widthFix" :src="item.image_src"></image>
            </navigator>
        </view> -->
        <view class="monthes_wrap">
          <view class="monthes_title">
            <view class="monthes_title_info">
              <view class="monthes_info">
                <text>{{days}} / </text>
                {{monthes}} 月
              </view>
            </view>
            <navigator class="monthes_title_more" url="/pages/more/index">更多 ></navigator>
          </view>
		    </view>
              <view class="title">
          <view class="iconfont icon-zhixian title_left"></view>
          <view class="title_text">今日特惠</view>
          <view class="iconfont icon-zhixian title_right"></view>
      </view>
      <view class="goods_list">
        <navigator class="goods_item"
            v-for="item in goodsList"
            :key="item.goods_id"
            :url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`"
            >
        
            <view class="goods_img_wrap">
              <image mode="aspectFill" lazy-load="true" :src="item.goods_small_logo"></image>
            </view>
                        
            <view class="goods_info_wrap">
                <view class="goods_name">{{item.goods_name}}</view>
                <view class="goods_price">
                <view class="new_price">￥{{item.goods_price}}</view>
                <view class="old_price">￥{{item.goods_price-item.goods_price*0.1}}</view>
                </view>
            </view>
                
            </navigator>
      </view>

        <!--楼层--> 
        <view class="index_floor">
            <view class="floor_group"
            v-for="item in floorList"
            
            :key="item.floor_title">
            
            <view class="floor_title">
                <image mode="widthFix" :src="item.floor_title.image_src"></image>
            </view>
            
            <view class="floor_list">
                <navigator
                v-for="(item,index) in item.product_list"
                
                :key="item.name"
                :url="item.navigator_url"
                >
                    <image :mode="index === 0?'widthFix':'scaleToFill'" :src="item.image_src"></image>
                </navigator>
            </view>
            </view>
        </view>
    </view>
</template>

<script>
import searchInput from "@/components/searchInput"
	export default {
		components:{
            searchInput
        },
		data(){
			return{

			monthes:'',
			days:'',

			//轮播图数组
			swiperList:[],
      list:[],
			//导航数组
			// catesList:[],
      goodsList:[],
			//楼层数据
			floorList:[],
       QueryParams:{
                    query:'冲锋衣',
                    cid:'',
                    pagenum:2,
                    pagesize:6
            },
			}
			
		},
		mounted(){
      this.getTime();
      // uni.setNavigationBarTitle({title:'推荐'})
			
			this.getSwiperList();
			// this.getCateList();
      this.getGoodsList();
			this.getFloorList();


		},



		
		methods:{

      getTime(){
        var myDate = new Date();

        const monthes = myDate.getMonth()+1;       //获取当前月份
        if(monthes<10){
          this.monthes = '0'+monthes;
        }else{
          this.monthes = monthes;
        }

        const days = myDate.getDate();        //获取当前日
        if(days<10){
          this.days = '0'+days;
        }else{
          this.days = days;
        }
        
        this.QueryParams.pagenum = days;


      },
			//获得轮播图数据
			getSwiperList(){ 
				this.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
					})
				.then(result=>{
					
					this.swiperList = result;
          // console.log(this.swiperList);  

				});
        // wx.request({
				// 	url:"http://123.207.32.32:8000/home/multidata",    
        //   success:(result)=>{
            
        //     this.list  = result.data.data.banner.list;
        //     console.log(this.list);
        //     this.swiperList[0].image_src = this.list[0].image
        //      this.swiperList[1].image_src = this.list[1].image
        //       this.swiperList[2].image_src = this.list[2].image
        //   }
				// 	});     

          
			},
			//获取导航栏数据
			// getCateList(){
			// 	this.request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"})
			// 	.then(result=>{
			// 		this.catesList = result;
		
			// 	})
			// },

      //获取列表
      getGoodsList(){
        this.request({
          url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
          data:this.QueryParams
        })
        .then(result=>{
          // console.log(result.goods);
          this.goodsList = result.goods;

        })
      },

			//获取楼层数据
			getFloorList(){
				this.request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"})
				.then(result=>{
					this.floorList=result;

          // console.log(result);
				})
			},

			}
		
	}
</script>

<style lang="scss">
	.index_swiper{
  swiper{
    width: 750rpx;
    height: 340rpx;
    image{
      width: 100%;
    }
  } 
}
// .index_cate{
//     display: flex;
//     navigator{
//       padding: 20rpx;
//       flex: 1;
//       image{
//         width: 100%;
//       }
//     }
// }


	.monthes_wrap {
    border-top: 10rpx solid #F2f2f2;
    border-bottom: 5px solid #F2f2f2;
		.monthes_title {
			display: flex;
			justify-content: space-between;
			padding: 15rpx;
			.monthes_title_info {
				color:var(--themeColor);
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
			.monthes_info {
				text {
					font-size: 36rpx;
				}
			}

			}

			.monthes_title_more {
				font-size: 30rpx;
				color: var(--themeColor);

			}
		}

	}
  .title {
    display: flex;
    padding: 15rpx;
    text-align: center;
  .iconfont {
    flex: 2;
    opacity:0.5;
  }

  .title_text {
    font-size: 30rpx;
    flex: 1;
    font-style:oblique;
    color: #292929;
  }
}
  .goods_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: content-box;
    padding: 15rpx;
    background-color: #F2f2f2;
      .goods_item {
          width: 339rpx;
          height: 472rpx;
          background-color: #fff;
          overflow: hidden;
          margin-bottom: 10rpx;
          border-radius: 5px;
        .goods_img_wrap {
          width: 339rpx;
          height: 339rpx;
          overflow: hidden;
          image {

          }
        }

        .goods_info_wrap {

          .goods_name {
            width: 280rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 24rpx;
            padding: 24rpx 0;
            color: #000;
            margin-left: 24rpx;
          }
          .goods_price{
            display: flex;
            .new_price {
                width: 280rpx;
                overflow: hidden;
                font-size: 24rpx;
                color: #e64340;
                margin-left: 24rpx;
            }
            .old_price{
              width: 280rpx;
              overflow: hidden;
              font-size: 24rpx;
              margin-left: 24rpx;
              color:#aaa;
              text-decoration:line-through;
            }
          }
          
        }
      }
  }
.index_floor{
  .floor_group{
    .floor_title{
      padding: 10rpx 0; 
      image{
        width: 100%;
      }
    }
    .floor_list{ 
      overflow: hidden;  
      navigator{
        float: left;
        width: 33.33%;
        /*后四个图片链接
        存在等比例
        232 / 386 = 33.33vw / height 
        */ 
        &:nth-last-child(-n+4){ 
          height:calc(33.33vw * 386 / 232 / 2);   
          border-left: 10rpx solid #fff;
         }  
        &:nth-child(2),
        &:nth-child(3){
          border-bottom: 10rpx solid #fff;
        }    
               
        image{      
          width: 100%;
          height: 100%;
        }   
      } 
    }
  } 
}  
</style>
